<template>
  <div>
    <!-- 
    绑定属性：用v-bind
    v-bind:属性名 可以简写成 :
    -->
    <img v-bind:src="url" width="100px" alt="">
    <img :src="url" :width="width" alt="">
    <div :class="classbox">1.定义单个类名</div>
    <div :class="{act:isOK}">2.定义isOk绑定单个类名，以对象的形式</div>
    <div :class="{act: isOK, box: isOK}">3.绑定多个类名，以对象的形式</div>
    <div :class="isOK ? 'box' :'act'">4.三元运算符 绑定类名</div>
    <div :class="[classbox,'box']">5.数组的方式绑定多个类名</div>
    <div :style="{color:'red',fontSize:size}">6.直接绑定样式</div>
    <div :style="obj">7.绑定style 对象的形式</div>
  </div>

 
</template>

<script>
export default{
data(){
  return{
    url:"https://b0.bdstatic.com/69bc43f058329a6b703490b36e7dda5a.jpeg",
    width:"100px",
    classbox:'act',
    isOK:true,
    size:"60px",
    obj:{
      color:'aqua',
      fontSize:'40px'
    }
  }
},
methods:{

}
}
</script>

<style scoped>
.act{
  background-color: red;
}
.box{
  font-size: 30px;
}
</style>